<template>
  <div class="py-6">
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-900">帮助中心</h1>
      <p class="mt-1 text-sm text-gray-500">获取系统使用帮助和支持</p>
    </div>

    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
      <div class="px-4 py-5 sm:px-6">
        <h2 class="text-lg leading-6 font-medium text-gray-900">常见问题</h2>
      </div>
      <div class="border-t border-gray-200">
        <div class="px-4 py-5 sm:px-6">
          <dl class="space-y-6">
            <div class="border-b border-gray-200 pb-6">
              <dt class="text-lg leading-6 font-medium text-gray-900">
                如何创建工单？
              </dt>
              <dd class="mt-2 text-base text-gray-500">
                <p>登录系统后，进入客户工作台，点击"创建工单"按钮，填写工单信息并提交即可。</p>
              </dd>
            </div>
            
            <div class="border-b border-gray-200 pb-6">
              <dt class="text-lg leading-6 font-medium text-gray-900">
                如何查看我的工单状态？
              </dt>
              <dd class="mt-2 text-base text-gray-500">
                <p>在客户工作台中，点击"我的工单"可以查看所有已提交的工单及其当前状态。</p>
              </dd>
            </div>
            
            <div class="border-b border-gray-200 pb-6">
              <dt class="text-lg leading-6 font-medium text-gray-900">
                工单处理流程是怎样的？
              </dt>
              <dd class="mt-2 text-base text-gray-500">
                <p>工单提交后会经过分配、处理、反馈和关闭等阶段。您可以在工单详情中查看实时处理进度。</p>
              </dd>
            </div>
            
            <div class="border-b border-gray-200 pb-6">
              <dt class="text-lg leading-6 font-medium text-gray-900">
                如何联系客服？
              </dt>
              <dd class="mt-2 text-base text-gray-500">
                <p>您可以通过电话 400-123-4567 或邮箱 support@example.com 联系我们的客服团队。</p>
              </dd>
            </div>
            
            <div>
              <dt class="text-lg leading-6 font-medium text-gray-900">
                系统支持哪些浏览器？
              </dt>
              <dd class="mt-2 text-base text-gray-500">
                <p>系统支持最新版本的 Chrome、Firefox、Safari 和 Edge 浏览器。</p>
              </dd>
            </div>
          </dl>
        </div>
      </div>
    </div>

    <div class="mt-6 bg-white shadow overflow-hidden sm:rounded-lg">
      <div class="px-4 py-5 sm:px-6">
        <h2 class="text-lg leading-6 font-medium text-gray-900">联系我们</h2>
      </div>
      <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-3">
          <div class="flex items-start">
            <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
              <i class="fa fa-phone text-blue-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-900">电话支持</h3>
              <p class="mt-1 text-sm text-gray-500">工作日 9:00-18:00</p>
              <p class="mt-1 text-sm text-gray-500">400-123-4567</p>
            </div>
          </div>
          
          <div class="flex items-start">
            <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
              <i class="fa fa-envelope text-green-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-900">邮箱支持</h3>
              <p class="mt-1 text-sm text-gray-500">support@example.com</p>
              <p class="mt-1 text-sm text-gray-500">24小时回复</p>
            </div>
          </div>
          
          <div class="flex items-start">
            <div class="flex-shrink-0 bg-purple-100 rounded-md p-3">
              <i class="fa fa-wechat text-purple-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-900">在线客服</h3>
              <p class="mt-1 text-sm text-gray-500">工作日 9:00-21:00</p>
              <p class="mt-1 text-sm text-gray-500">点击右侧聊天图标</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>